<template>
	<view>
		<view class="mine">
			<image class="mine-image" v-if="from.avatar" @click='uploadImage' :src="from.avatar"></image>
			<image class="mine-image" @click="uploadImage" v-else src='../../static/index/goodsvip.png' mode=""></image>
			<view class="mine-right">
				<view class="mine-right-view">
					<view class="mine-right-title">姓名: {{from.real_name}}</view>
					<view class="mine-right-vip">云数贸华为手表</view>
				</view>
				<view class="mine-right-view">
					<view class="mine-right-desc">手机: {{from.mobile}}</view>
					<view class="mine-right-icon" @click="$emit('goToInfo')">
						<view class="mine-right-btn">领取</view>
					</view>
				</view>
				<view class="mine-right-view">
					<view class="mine-right-ID">粮仓等级:{{from.level}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			from:Object
		},
		methods:{
			uploadImage(){
				this.$emit('uploadImage')
			}
		}
	}
</script>

<style lang="scss">
	.mine-right-btn{
		    background-color: $uni-color-F37F02;
		    border-radius: 12rpx;
		    padding: 12rpx 16rpx;
		    font-size: 10px;
		    color: #ffffff;
		    // box-shadow: 2px 2px 2px #cccccc;
	}
	.mine {
		display: flex;
		align-items: center;
		.mine-image {
			width: 150rpx;
			height: 150rpx;
			margin-right: 30rpx;
			border-radius: 150rpx;
			flex-shrink: 0;
			border: 4rpx solid #ffffff;
		}
	
		.mine-right {
			flex: 1;
	
			.mine-right-view {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				justify-content: space-between;
				.mine-right-title {
					font-size: 18px;
					color: #ffffff;
				}
				.mine-right-icon{
					display: flex;
					align-items: center;
				}
	
				.mine-right-vip {
					// width: 130rpx;
					height: 40rpx;
					text-align: center;
					line-height: 20rpx;
					font-size: 16px;
					padding: 10rpx 20rpx;
					color: #ffffff;
					// background: url('../../static/mine/38.png') no-repeat;
					// background-size: 100% 40rpx;
					margin-left: 20rpx;
				}
			}
	
			.mine-right-desc {
				font-size: 18px;
				color: #ffffff;
				margin-bottom: 20rpx;
			}
	
			.mine-right-ID {
				font-size: 12px;
				color: #333333;
				background: #FFD8AF;
				border-radius: 15rpx;
				color: $uni-color-F37F02;
				width: 200rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
			}
	
		}
	}
	
	.mine-view {
		padding: 30rpx;
		background: linear-gradient(180deg, #2776F6 0%, rgba(51, 120, 231, 0.00) 50%);
		background-blend-mode: multiply;
	}
</style>